<%@ page language="java"
         import="com.ruohi.manage.DBType,com.ruohi.manage.PoolManager,com.ruohi.util.common.CommonDate,com.ruohi.util.common.CommonForm,com.ruohi.util.common.CommonString,com.ruohi.util.common.Env"
         pageEncoding="UTF-8" %>
<%@ page import="com.ruohi.util.dbutil.DBHelper" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.Map" %>
<%
	Connection connection = null;
	DBHelper dbHelper = DBHelper.getInstance();
	Map model = new HashMap();
	String tableName = "gift_customize_case";
	String channelUUID = CommonString.getFormatPara(request.getParameter("channel_uuid"));
	Map adminInfo = (Map)session.getAttribute("adminInfo");
	
	try{
		connection = PoolManager.getConnection(DBType.getDBTypeByEnum("106013"));
		String id = CommonString.getFormatPara(request.getParameter("id"));
		if(null!=id&&!"".equals(id)){
			model = dbHelper.getMap(" select * from "+tableName+" where uuid = ? ",new Object [] {id} , connection);
		}
		if("".equals(channelUUID)&&null!=model){
			channelUUID = (String)model.get("channel_uuid");
		}
		
		String no = CommonString.getFormatPara(model.get("no"));
		if(no.equals("")){
			no = CommonDate.getToday("yyyyMMddHHmmss")+(int)(Math.random()*1000);
		}
		
		//从图
		List<Map> images = dbHelper.getMapList(" select * from gift_sub_image where parent_id = ? order by order_no desc , id asc ",new Object [] {no},connection);
		//图片数量
		int imgCount = 0;
		if(images != null){
			imgCount = images.size();
		}
		//主图
		String mainImageName = CommonString.getFormatPara(model.get("img"));
		String msg = "";
		
		String resDomain = Env.getInstance().getProperty("img_domain");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><%=Env.getInstance().getProperty("project_name") %></title>
<link rel="stylesheet" type="text/css" href="/plugin/other/highslide/highslide.css" />
<link href="/plugin/ui/ligerUI/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<link href="/plugin/ui/ligerUI/ligerUI/skins/Gray/css/all.css" rel="stylesheet" type="text/css" />
<link href="/plugin/ui/ligerUI/ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css" />
<link href="/backend/style/style.css" rel="stylesheet" type="text/css" />
<script src="/plugin/jquery/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/plugin/area/city/citys.js"></script>
<script type="text/javascript" charset="utf-8" src="/plugin/editor/ueditor/editor_config.js"></script>
<script type="text/javascript" charset="utf-8" src="/plugin/editor/ueditor/editor_all_min.js"></script>
<link rel="stylesheet" type="text/css" href="/plugin/editor/ueditor/themes/default/ueditor.css"/>
<style type="text/css">
.shade { filter:alpha(opacity=30); -moz-opacity:0.3; -khtml-opacity: 0.3; opacity: 0.3; background-color:#fff; position: relative; width: 130px; height: 135px; z-index: 4; display: none; }
.blue { border: 1px solid blue; }
.ccc { border: 1px solid #ccc; }
.toobar { position: absolute; bottom: 0px; height: 20px; width: 130px; border-top: 1px solid #ccc; }
.single_img { border: 1px solid #ccc; width: 130px; height: 135px; float:left; margin: 10px 0 10px 10px; display:inline; position:relative; cursor: pointer; overflow: hidden; }
.single_img .show_img { position:absolute; bottom: 20px; }
.formRight { text-align:left;}
</style>
</head>

<body style="margin: 0;padding: 0; overflow-y:auto; *overflow-y:hidden;">
<form name="theform" id="theform" action="/backend/action/crud.jsp?enumNo=106013">
  <div class="formDiv" style="position:relative; text-align:left;">
    <div class="group"> <span><img src="/plugin/ui/ligerUI/ligerUI/skins/icons/communication.gif" /></span> <span class="groupTitle">基础信息</span> </div>
    <div class="formLeft"><span style="color:#F00">* </span>案例名称</div>
    <div class="formRight" style="width:190px">
      <input type="text" dataType="Require" msg="请输入案例名称" class="jr_text" name="zd_name" id="zd_name" value="<%=CommonString.getFormatPara(model.get("name")) %>" maxlength="50"/>
    </div>
    <div class="formLeft"><span style="color:#F00">* </span>案例编号(自动)</div>
    <div class="formRight" style="width:190px">
      <input type="text" name="zd_no" class="jr_text" readonly="readonly" id="zd_no" value="<%=no %>"/>
    </div>
    <div style="clear:left;"></div>
    <div class="formLeft">材质</div>
    <div class="formRight">
      <input type="text" class="jr_text" name="zd_texture" id="zd_texture" value="<%=CommonString.getFormatPara(model.get("texture")) %>" maxlength="30" />
    </div>
    <div style="clear:left;"></div>
    <div class="formLeft">生产周期</div>
    <div class="formRight">
      <input type="text" class="jr_text" name="zd_cycle_time" id="zd_cycle_time" value="<%=CommonString.getFormatPara(model.get("cycle_time")) %>" maxlength="100" />
    </div>
    <div style="clear:left;"></div>
    <div class="formLeft">物流情况</div>
    <div class="formRight">
      <input type="text" class="jr_text" name="zd_logistics" id="zd_logistics" value="<%=CommonString.getFormatPara(model.get("logistics")) %>" maxlength="100" />
    </div>
    <div style="clear:left;"></div>
    <div class="group" style="height:22px;"><div style="float:left; white-space:nowrap;"> <span><img src="/plugin/ui/ligerUI/ligerUI/skins/icons/communication.gif" /></span> <span class="groupTitle">定制商品图片</span></div> <span id="sub_img" style="float:right"></span>
    </div>
    <div class="w100 l">
      <div id="flashContainer" class="w100 l" style="height:auto; text-align:center;margin-left:16px; *margin-left:16px"></div>
      <%
        if(imgCount > 0){
      %>
      <div class="w100 l" style="margin-left:30px">
      <span style=" display:block; width: 480px; padding-left:10px;"> 
      <span id="setMainImg" style="cursor:pointer; color:#000000; font-family: 微软雅黑"><img src="/plugin/ui/ligerUI/ligerUI/skins/icons/database.gif" align="absmiddle" style="margin-bottom:2px" /> 设为主图</span> 
      <span id="del_img" style="cursor:pointer; color:#000000; font-family: 微软雅黑"><img src="/plugin/ui/ligerUI/ligerUI/skins/icons/delete.gif" align="absmiddle" style="margin-bottom:2px" /> 删除</span>
      <span style="color:#999999">（友情提示：单击图片选中，拖动图片进行排序。）</span> 
      </span> 
      </div>
      <%}%>
      <div style="clear:both;"></div>
    </div>
    
    <%
		if(imgCount > 0){
	%>
    <div style="border: 1px solid #ccc; width: 700px; height: auto; overflow-y: auto; margin-left:30px; position:relative;" id="sortable">
    <%
		if(null!=images&&images.size()>0){
			Map subModel = null;
			for(int i=0;i<images.size();i++){
				subModel = images.get(i);
	%>
      <div class="single_img" id="<%=subModel.get("uuid") %>" title="<%=subModel.get("img") %>">
        <div><img class="show_img" width="130px;" src="<%=resDomain+subModel.get("small_img") %>" /></div>
        <div class="toobar">
    <%
    		if(mainImageName.equals(subModel.get("img"))){
    %>
        	<input myid="<%=subModel.get("uuid") %>" type="text" class="miaoshu" oldval="<%=subModel.get("title") %>" style="border:none; border-right: 1px solid #ccc; font-weight:bold; width: 100px; height: 18px; color:#FF0000; text-align:center" value="<%=subModel.get("title").equals("")?"主图":subModel.get("title") %>" />
            <%
				}else{ 
			%>
            <input myid="<%=subModel.get("uuid") %>" type="text" class="miaoshu" oldval="<%=subModel.get("title") %>" style="border:none; border-right: 1px solid #ccc; width: 100px; height: 18px;text-align:center" value="<%=subModel.get("title") %>" />
            <%
				}
			%>
            <a href="<%=resDomain+subModel.get("img") %>" onclick="return hs.expand(this)" class="highslide"> <img style="position: absolute; bottom: 0px; right:3px; width: 18px; height: 18px;" src="/images/fangda.gif" /> </a>
        </div>
        <div class="shade"></div>
      </div>
			<%
                    }
                }
            %>
      <div style="clear: left;"></div>
    </div>
    <%
        }
    %>
    <div style="float:left; border: 1px solid #ccc; width: 700px; position:relative; height: auto; overflow-y: auto; margin-left:30px;display:none" id="sortable2">
    </div>
    <div style="clear:both;"></div>
        
    <div class="group"> <span><img src="/plugin/ui/ligerUI/ligerUI/skins/icons/communication.gif" /></span> <span class="groupTitle">描述</span> </div>
    <div class="formRight" style="width:700px; height:160px; padding-left:30px">
      <script type="text/plain" id="editor_content" style="width:700px; height:100px;"><%=CommonString.getFormatPara(model.get("intro")) %></script>
      <input type="hidden" name="zd_intro" id="zd_intro" value="" />
    </div>
    <div class="group"> <span><img src="/plugin/ui/ligerUI/ligerUI/skins/icons/communication.gif" /></span> <span class="groupTitle">扩展信息</span> </div>
    <div class="formLeft">是否显示</div>
    <div class="formRight" style="width:190px"> <%=CommonForm.createIsRadio(CommonString.getFormatPara(model.get("is_show")),"zd_is_show") %> </div>
    <div class="formLeft">定制首页推荐</div>
    <div class="formRight" style="width:190px;"> <%=CommonForm.createIsRadio(CommonString.getFormatInt(model.get("is_cus_index_rec")).toString(),"zd_is_cus_index_rec") %> </div>
    <div style="clear:left;"></div>
    <div class="formLeft">点击次数</div>
    <div class="formRight" style="text-align: left;width:150px">
      <input type="text" class="jr_text" style="width: 150px;" name="zd_view_count" id="zd_view_count" value="<%=CommonString.getFormatPara(model.get("view_count")) %>" />
    </div>
    <div class="group"> <span><img src="/plugin/ui/ligerUI/ligerUI/skins/icons/communication.gif" /></span> <span class="groupTitle">备注（只在后台显示）</span> </div>
    <div class="formLeft">备注</div>
	  <div class="formRight" style="text-align:left; height:75px;">
	    	<textarea style="width:400px; height:60px;" id="zd_remark" name="zd_remark" maxlength="500"><%=CommonString.getFormatPara(model.get("remark")) %></textarea>
	  </div>
	  <div style="clear:left;"></div>
  </div>
  <input type="hidden" name="tableName" id="tableName" value="<%=tableName %>" />
  <input type="hidden" name="zd_id" id="zd_id" value="<%=CommonString.getFormatPara(model.get("id")) %>" />
  <input type="hidden" name="zd_order_no" id="zd_order_no" value="<%=CommonString.getFormatPara(model.get("order_no")) %>" />
  <input type="hidden" name="zd_img" id="zd_img" dataType="Require" msg="请上传图片" value="<%=CommonString.getFormatPara(model.get("img")) %>" />
  <input type="hidden" name="zd_channel_uuid" id="zd_channel_uuid" value="<%=channelUUID %>" />
  <input type="hidden" name="eventAfter" id="eventAfter" value="" />
</form>
</body>
</html>
<script type="text/javascript" src="/plugin/jquery/jquery.form.js"></script>
<script src="/plugin/ui/ligerUI/ligerUI/js/ligerui.min.js" type="text/javascript"></script>
<script src="/backend/scripts/common.js?tab" type="text/javascript"></script>
<script src="/plugin/validator/wofoshan/validator.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/plugin/other/highslide/highslide.min.js"></script>
        <script type="text/javascript" src="http://img.52sdskj.com/plugin/upload/jr_upload.js"></script>
<script src="/plugin/date/My97DatePicker/WdatePicker.js" type="text/javascript"></script>

<script src="/plugin/ui/jqueryUI/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript">
	function doSub(dialog){
		var rs = Validator.Validate(document.getElementById("theform"),1);
		if(rs){
			jQuery("#theform").ajaxSubmit({
				type : "POST",
				async : false ,
				success : function(data) {
					var rs = parseInt(jQuery.trim(data), 10);
					if (rs > 0) {
						window.parent.jQuery.ligerDialog.success("操作成功", "提示", function(){
							dialog.close();
						});
					} 
				}
			});	
		}
	}
	
	var ue_content = new baidu.editor.ui.Editor({
    	textarea : 'zd_intro',
    	autoHeightEnabled:false,
    	watermark : false,
    	minFrameHeight:100
    });
    ue_content.render('editor_content');
    ue_content.addListener("selectionchange",function(){
	    var state_content = ue_content.queryCommandState("source");
	    document.getElementById("zd_intro").value=ue_content.getContent();
	});
	document.getElementById("zd_intro").value=ue_content.getContent();
	
	//图片批量上传----------
	jQuery("#sub_img").JrUpload({
        remotUrl: "http://img.52sdskj.com/upload.jsp",
		folder : "saygou" ,
		watermark:false,
		multi:true,
		callback : "setSubImg"
	});
	function setSubImg(data){
		if(data != ""){
			<%if(model.get("id") == null){//新增数据时上传图片%>
				var dataArr = data.split(",");
				//页面赋值
				var imgHtml = "";
				for(var i = 0;i < dataArr.length;i++){
				  imgHtml += "<div class=\"single_img\" id=\"\">";
				  imgHtml += "<div><img class=\"show_img\" width=\"130px\" height=\"100px\" src=\"<%=resDomain %>"+dataArr[i]+"\" /></div>";
				  imgHtml += "<div class=\"shade\"></div>";
				  imgHtml += "<div style=\"display:inline;\"><a href=\"javascript://void(0);\" onclick=\"setMainImgByAdding(this);\">设为主图</a><a href=\"javascript://void(0);\" onclick=\"deleteImgByAdd(this);\" style=\"margin-left:5px;\">删除</a></div>";
				  imgHtml += "</div>";
				}
				jQuery("#sortable2").html($("#sortable2").html() + imgHtml);
				jQuery("#sortable2").css("display","block");
			<%}%>
			saveImgToDb(data);//保存到数据库
		}
	}
	/*将图片保存到数据库*/
	function saveImgToDb(str){
		var data = {
			flag : 'saveSubImg',
			enumNo : '106013',
			imgCount: '<%=imgCount%>',
			parent_id : '<%=no %>',
			channel_uuid : '<%=channelUUID %>',
			imgStr : str
		};
		
		var firstImg = str.indexOf(",")>0?str.substring(0,str.indexOf(",")):str;
		if("<%=imgCount%>"=="0" || jQuery("#zd_img").val()==""){//若原来没有图片，设置上传的第一张为主图
			jQuery("#zd_img").val(firstImg);
		}
		jQuery.ajax({
				url:"/backend/action/ajax_cud.jsp",
				data:data,
				success:function(data){
					if(jQuery.trim(data)=='ok'){
						<%if(model.get("id") != null){//若修改数据时上传图片%>
							if("<%=imgCount%>"=="0" || jQuery("#zd_img").val()==""){//若原来没有图片，设置上传的第一张为主图
								jQuery.ajax({
									url:'/backend/action/ajax_cud.jsp',
									data:{'flag':'setMainImg','imgSrc':firstImg,'tableName':'<%=tableName%>','parent_id':'<%=no%>','enumNo':'106013'},
									type:'post',
									async:false
								});	
							}
							window.location.reload();
						<%}%>
					}
				}
			});
		
	}
	
	function setMainImgByAdding(obj){
		var img = $(obj).parents("div.single_img").find("img.show_img").attr("src");
		img = img.replace("<%=resDomain %>","");
		$("#zd_img").val(img);
		$(obj).parents("div.single_img").parent("div").find("div.main_img").remove();
		$(obj).parents("div.single_img").append("<div class=\"main_img\" style=\"display:inline;\"> (主图)</div>");
	}
	
	jQuery("#sortable").sortable({
		stop : function(event, ui) {
			doSort();
		}
	});
	function doSort(){
		var sortHtml = "";
		var myid = "";
		jQuery.each(jQuery("#sortable>div"),function(index,data){
			myid =  jQuery(this).attr("id");
			if(myid==undefined){
				return;
			}
			sortHtml +=myid+",";
		});
		sortHtml = sortHtml.substring(0,sortHtml.length-1);
		jQuery.ajax({
			url:"/backend/action/ajax_cud.jsp",
			type:"post",
			data:{'flag':'saveSort',"tableName":"gift_sub_image","sortId":sortHtml,'enumNo':'106013'},
			async:false,
			cache:false
		});
	}
	jQuery("#sortable").disableSelection();
	jQuery(".single_img .show_img").click(function(){
		var obj = jQuery(this).parent().parent();
		obj.removeClass("ccc");
		obj.addClass("blue");
		obj.css("border","1px solid blue");
		obj.find(".shade").show();
	});
	jQuery(".shade").click(function(){
		var obj = jQuery(this).parent();
		obj.removeClass("blue");
		obj.addClass("ccc");
		obj.css("border","1px solid #ccc");
		obj.find(".shade").hide();
	});
	hs.graphicsDir = '/plugin/other/highslide/graphics/';
	hs.wrapperClassName = 'wide-border';
	var imageData = [],          //用于保存从服务器返回的图片信息数组
	selectedImageCount = 0;  //当前已选择的但未上传的图片数
	
	
	jQuery("#sortable2").sortable({
		stop : function(event, ui) {
			doSort2();
		}
	});
	function doSort2(){
		var imgs = "";
		jQuery.each(jQuery("#sortable2>div.single_img"),function(index,data){
			var img = $(this).find("img.show_img").attr("src");
			img = img.replace("<%=resDomain %>","");
			imgs += img + ",";
		});
		imgs = imgs.substring(0, imgs.length-1);
		
		jQuery.ajax({
			url:"/backend/action/ajax_cud.jsp",
			type:"post",
			data:{'flag':'saveSortByAdd',"tableName":"gift_sub_image","product_no":"<%=no %>","sortImg":imgs,'enumNo':'106013'},
			async:false,
			cache:false
		});
	}
	
	function deleteImgByAdd(obj){
		if(confirm("确定要删除吗？")){
			var img = $(obj).parents("div.single_img").find("img.show_img").attr("src");
			img = img.replace("<%=resDomain %>","");
			
			jQuery.ajax({
				url:"/backend/action/ajax_cud.jsp",
				type:"post",
				data:{'flag':'deleteImgByAdd',"tableName":"gift_sub_image","product_no":"<%=no %>","img":img,'enumNo':'106013'},
				async:false,
				cache:false,
				success:function(result){
					if($.trim(result) == "ok"){
						if($(obj).parents("div.single_img").children("div.main_img").length>0){
							$("#zd_img").val("");
						}
						$(obj).parents("div.single_img").remove();
					}
				}
			});
		}
	}
	
	jQuery("#del_img").click(function(){
		var blue = jQuery(".blue");
		if(blue.length<=0){
			alert("请单击选择您要删除的图片");
			return;
		}
		if(blue.length == "<%=imgCount%>"){
			alert("至少要保留一张图片");	
			return false;
		}
			if(confirm("确定要删除选中的"+blue.length+"张图片吗？")){
				var ids = "";
				jQuery.each(blue,function(index,data){
					ids += "'"+this.getAttribute('id')+"',";
				});
				if(ids.indexOf(',')!=-1){
					ids=ids.substring(0,ids.length-1);
				}
				jQuery.ajax({
					url:'/backend/action/ajax_cud.jsp',
					data:{'flag':'groupDel','ids':ids,'tableName':'gift_sub_image','enumNo':'106013'},
					type:'post',
					async:false,
					success:function(data){
						if(jQuery.trim(data)=='ok'){
							window.location.reload();
						}
					}
				});	
			}
		});
	//});
	
	jQuery("#setMainImg").click(function(){
		var blue = jQuery(".blue");
		if(blue.length<=0){
			alert("请单击选择您要设置为主图的图片");
			return;
		}
			if(confirm("确定要把选中的图片设置为主图吗？")){
				var imgSrc = "";
				jQuery.each(blue,function(index,data){
					imgSrc = this.getAttribute('title');
					return false;
				});
				if(imgSrc.indexOf(',')!=-1){
					imgSrc=ids.substring(0,ids.length-1);
				}
				jQuery.ajax({
					url:'/backend/action/ajax_cud.jsp',
					data:{'flag':'setMainImg','imgSrc':imgSrc,'tableName':'<%=tableName%>','parent_id':'<%=no%>','enumNo':'106013'},
					type:'post',
					async:false,
					success:function(data){
						if(jQuery.trim(data)=='ok'){
							window.location.reload();
						}
					}
				});	
			}
		//});
	});
	//图片批量上传----------
</script>
<%
	}catch(Exception e){
		e.printStackTrace();
	}finally{
		DBHelper.freeConnection(connection);
	}
%>